<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题切换示例</title>
    <style>
        /* 主题变量 */
        :root {
            --bg-color: #ffffff;
            --text-color: #333;
            --primary: #007bff;
            --border: #e0e0e0;
            --input-bg: #f8f9fa;
        }

        :root[data-theme="dark"] {
            --bg-color: #2c2c2c;
            --text-color: #fff;
            --primary: #40a9ff;
            --border: #444;
            --input-bg: #3a3a3a;
        }

        /* 全局样式 */
        body {
            background: var(--bg-color);
            color: var(--text-color);
            font-family: 'Segoe UI', sans-serif;
            margin: 20px;
            transition: all 0.3s ease;
        }

        /* 按钮样式 */
        #theme-toggle {
            padding: 8px 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 20px;
        }

        /* 搜索区域 */
        .search-group {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }

        .search-group input {
            padding: 8px;
            background: var(--input-bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            flex: 1;
        }

        /* 表格样式 */
        .table-container {
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 4px;
            overflow: hidden;
        }

        :root[data-theme="dark"] table {
            background: #3a3a3a;
        }

        th, td {
            padding: 12px;
            border-bottom: 1px solid var(--border);
            text-align: left;
        }

        th {
            background: var(--input-bg);
            font-weight: 600;
        }

        /* 操作按钮 */
        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .action-buttons button {
            padding: 8px 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="theme-toggle">🌙 切换到黑暗主题</button>

    <div class="search-group">
        <input type="text" placeholder="输入搜索内容">
        <button>搜索</button>
    </div>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>001</td>
                    <td>条目一</td>
                    <td>2024-01-01</td>
                    <td><button>编辑</button></td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>条目二</td>
                    <td>2024-01-02</td>
                    <td><button>删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="action-buttons">
        <button>保存</button>
        <button style="background: #dc3545;">删除</button>
    </div>

    <script>
        const toggleBtn = document.getElementById('theme-toggle');
        const root = document.documentElement;

        // 初始化主题
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
            root.dataset.theme = savedTheme;
            toggleBtn.textContent = savedTheme === 'dark' ? '☀️ 切换到白天主题' : '🌙 切换到黑暗主题';
        }

        toggleBtn.addEventListener('click', () => {
            const current = root.dataset.theme || 'light';
            const newTheme = current === 'light' ? 'dark' : 'light';
            
            root.dataset.theme = newTheme;
            localStorage.setItem('theme', newTheme);
            
            toggleBtn.textContent = newTheme === 'dark' ? '☀️ 切换到白天主题' : '🌙 切换到黑暗主题';
        });
    </script>
</body>
</html>